<template>
	<view class="content">
		<view class="librarys">
			<view class="library-item" v-for="(item ,i) in librarys" @click="libraryInfo(item.id)">
				<image class="img" mode="aspectFit" :src="'http://localhost:4567/messy_json/img?path='+item.img"></image>
				<view class="msgs">
					<view class="name">
						{{item.libraryName}}
					</view>
					<view class="msg">
						{{item.message}}
					</view>
				</view>
				<view class="operation">
					<button type="primary" size="mini" @click="goto('/pages/about/about')">进入</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				librarys: [],
			}
		},
		onLoad() {
			this.getLibraryList();
		},
		onPullDownRefresh() {
			this.getLibraryList();
		},
		methods: {
			libraryInfo(id) {
				var link = "/pages/libraryInfo/libraryInfo?id=" + id;
				uni.navigateTo({
					url: link
				});
			},
			getLibraryList() {
				var _self = this;
				uni.getStorage({
					key: 'token',
					success: function(storage) {
						console.log(storage);
						uni.request({
							url: "http://localhost:4567/library_json/list.json",
							header: {
								"token": storage.data.tokenName,
							},
							method: "POST",
							success: (res) => {
								if (res.statusCode == 500) {
									uni.navigateTo({
										url: '/pages/login/login'
									});
								} else {
									_self.librarys = res.data
								}
							},
							fail: (res) => {
								uni.navigateTo({
									url: '/pages/login/login'
								});
							}

						});
					},
				});
			},
		}
	}
</script>

<style lang="less" scoped>
	.librarys {
		width: 100%;

		.library-item {
			position: relative;
			width: 100%;
			padding-top: 25rpx;
			padding-bottom: 25rpx;
			padding-left: 25rpx;
			border-bottom: 1px #C0C4CC solid;

			.img {
				float: left;
				width: 100rpx;
				height: 100rpx;
			}

			.msgs {
				width: 60%;
				margin-left: 20rpx;
				display: inline-block;

				.msg {
					color: #909399;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}

			.operation {
				position: absolute;
				top: 30rpx;
				right: 50rpx;
			}
		}
	}
</style>
